<!--
 * @Author: your name
 * @Date: 2021-08-13 15:36:27
 * @LastEditTime: 2021-08-16 18:32:59
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \网易考拉项目(自己的)\overseaManagement.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./bootstrap-4.5.0-dist/css/bootstrap.css">
    <script src="./js/jquery-3.6.0.min.js"></script>
    <script src="./bootstrap-4.5.0-dist/js/bootstrap.bundle.min.js"></script>
    <script src="./bootstrap-4.5.0-dist/js/bootstrap.js"></script>
    <link rel="stylesheet" href="./fonts/font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="./css/overseaManagement.css">
    <title>overseaManagement</title>
</head>

<body>
    <!-- 标题 -->
    <div id="title">
        <img src="./images/网易考拉logo.png" alt="">
        <span>海外直购后台管理系统</span>
    </div>
    <!-- 第二个盒子 -->
    <div id="section">
        <!-- 导航 -->
        <div class="nav">
            <ul class="list-group">
                <li class="list-group-item list-group-item-info">
                    <a href="./overseaManagement.html">海外直购管理</a> </li>
                <li class="list-group-item list-group-item-danger">
                    <a href="./milk powder backstage.html">品质奶粉管理</a></li>
                <li class="list-group-item list-group-item-info">
                    <a href="./the admin of the charge.html">用户充值管理</a></li>
                <li class="list-group-item list-group-item-danger">
                    <a href="./user.html">用户信息管理</a></li>
                <li class="list-group-item list-group-item-info">
                    <a href="./exchange.html">积分兑换管理</a></li>
                <li class="list-group-item list-group-item-danger">
                    <a href="./discount coupon.html">优惠券管理</a></li>
            </ul>
        </div>
        <!-- 内容 -->
        <div class="content">
            <div class="content-top">
                <!-- 添加按钮 -->
                <button type="button" class="btn btn-outline-light" data-toggle="modal" data-target="#addModal">
                <i class="fa fa-plus-square-o" aria-hidden="true"></i>
                添加
            </button>
                <!-- 搜索框 -->
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <button class="btn btn-outline-secondary" type="button" id="button-addon1">
                            <i class="fa fa-search" aria-hidden="true"></i>
                        </button>
                    </div>
                    <input type="text" class="form-control" placeholder="请输入关键词" aria-label="Example text with button addon" aria-describedby="button-addon1">
                </div>
            </div>
            <!-- 单页表格 -->
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th scope="col">编号</th>
                        <th scope="col">名称</th>
                        <th scope="col">所属类别</th>
                        <th scope="col">陈列类别</th>
                        <th scope="col">信息描述</th>
                        <th scope="col">历史价格</th>
                        <th scope="col">现价</th>
                        <th scope="col">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row">1</th>
                        <td>老爹鞋</td>
                        <td>服饰鞋靴</td>
                        <td>热销爆款</td>
                        <td>金泫雅同款</td>
                        <td>399</td>
                        <td>357</td>
                        <td>
                            <button type="button" class="btn btn-outline-light button1 " data-toggle="modal" data-target="#delModal">
                                删除
                            </button>
                            <button type=" button " class="btn btn-outline-light ">
                                上移
                            </button>
                            <button type="button " class="btn btn-outline-light ">
                                下移
                            </button>
                            <button type="button " class="btn btn-outline-light" data-toggle="modal" data-target="#addModal">
                                编辑
                            </button>
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">2</th>
                        <td>GUCCI</td>
                        <td>美容彩妆</td>
                        <td>热销爆款</td>
                        <td>繁华盛宴</td>
                        <td>450</td>
                        <td>428</td>
                        <td>
                            <button type="button" class="btn btn-outline-light button1 " data-toggle="modal" data-target="#delModal">
                                删除
                            </button>
                            <button type=" button " class="btn btn-outline-light ">
                                上移
                            </button>
                            <button type="button " class="btn btn-outline-light ">
                                下移
                            </button>
                            <button type="button " class="btn btn-outline-light" data-toggle="modal" data-target="#addModal">
                                编辑
                            </button>
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">3</th>
                        <td>BURBERRY</td>
                        <td>美容彩妆</td>
                        <td>热销爆款</td>
                        <td>红粉恋歌</td>
                        <td>200</td>
                        <td>148</td>
                        <td>
                            <button type="button" class="btn btn-outline-light button1 " data-toggle="modal" data-target="#delModal">
                                删除
                            </button>
                            <button type=" button " class="btn btn-outline-light ">
                                上移
                            </button>
                            <button type="button " class="btn btn-outline-light ">
                                下移
                            </button>
                            <button type="button " class="btn btn-outline-light" data-toggle="modal" data-target="#addModal">
                                编辑
                            </button>
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">4</th>
                        <td>VERSACE</td>
                        <td>美容彩妆</td>
                        <td>热销爆款</td>
                        <td>香恋水晶</td>
                        <td>230</td>
                        <td>226</td>
                        <td>
                            <button type="button" class="btn btn-outline-light button1 " data-toggle="modal" data-target="#delModal">
                                删除
                            </button>
                            <button type=" button " class="btn btn-outline-light ">
                                上移
                            </button>
                            <button type="button " class="btn btn-outline-light ">
                                下移
                            </button>
                            <button type="button " class="btn btn-outline-light" data-toggle="modal" data-target="#addModal">
                                编辑
                            </button>
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">5</th>
                        <td>GUCCI</td>
                        <td>美容彩妆</td>
                        <td>热销爆款</td>
                        <td> 罪爱</td>
                        <td>577</td>
                        <td>479</td>
                        <td>
                            <button type="button" class="btn btn-outline-light button1 " data-toggle="modal" data-target="#delModal">
                                删除
                            </button>
                            <button type=" button " class="btn btn-outline-light ">
                                上移
                            </button>
                            <button type="button " class="btn btn-outline-light ">
                                下移
                            </button>
                            <button type="button " class="btn btn-outline-light" data-toggle="modal" data-target="#addModal">
                                编辑
                            </button>
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">6</th>
                        <td>Calvin Klein</td>
                        <td>美容彩妆</td>
                        <td>热销爆款</td>
                        <td>ONE</td>
                        <td>175</td>
                        <td>175</td>
                        <td>
                            <button type="button" class="btn btn-outline-light button1 " data-toggle="modal" data-target="#delModal">
                                删除
                            </button>
                            <button type=" button " class="btn btn-outline-light ">
                                上移
                            </button>
                            <button type="button " class="btn btn-outline-light ">
                                下移
                            </button>
                            <button type="button " class="btn btn-outline-light" data-toggle="modal" data-target="#addModal">
                                编辑
                            </button>
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">7</th>
                        <td>圣罗兰</td>
                        <td>美容彩妆</td>
                        <td>热销爆款</td>
                        <td>黑色鸦片</td>
                        <td>448</td>
                        <td>472</td>
                        <td>
                            <button type="button" class="btn btn-outline-light button1 " data-toggle="modal" data-target="#delModal">
                                删除
                            </button>
                            <button type=" button " class="btn btn-outline-light ">
                                上移
                            </button>
                            <button type="button " class="btn btn-outline-light ">
                                下移
                            </button>
                            <button type="button " class="btn btn-outline-light" data-toggle="modal" data-target="#addModal">
                                编辑
                            </button>
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">8</th>
                        <td>HERMÈS</td>
                        <td>美容彩妆</td>
                        <td>热销爆款</td>
                        <td>大地</td>
                        <td>615</td>
                        <td>538</td>
                        <td>
                            <button type="button" class="btn btn-outline-light button1 " data-toggle="modal" data-target="#delModal">
                                删除
                            </button>
                            <button type=" button " class="btn btn-outline-light ">
                                上移
                            </button>
                            <button type="button " class="btn btn-outline-light ">
                                下移
                            </button>
                            <button type="button " class="btn btn-outline-light" data-toggle="modal" data-target="#addModal">
                                编辑
                            </button>
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">9</th>
                        <td>HERMÈS</td>
                        <td>美容彩妆</td>
                        <td>热销爆款</td>
                        <td>大地</td>
                        <td>615</td>
                        <td>538</td>
                        <td>
                            <button type="button" class="btn btn-outline-light button1 " data-toggle="modal" data-target="#delModal">
                                删除
                            </button>
                            <button type=" button " class="btn btn-outline-light ">
                                上移
                            </button>
                            <button type="button " class="btn btn-outline-light ">
                                下移
                            </button>
                            <button type="button " class="btn btn-outline-light" data-toggle="modal" data-target="#addModal">
                                编辑
                            </button>
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">10</th>
                        <td>HERMÈS</td>
                        <td>美容彩妆</td>
                        <td>热销爆款</td>
                        <td>大地</td>
                        <td>615</td>
                        <td>538</td>
                        <td>
                            <button type="button" class="btn btn-outline-light button1 " data-toggle="modal" data-target="#delModal">
                                删除
                            </button>
                            <button type=" button " class="btn btn-outline-light ">
                                上移
                            </button>
                            <button type="button " class="btn btn-outline-light ">
                                下移
                            </button>
                            <button type="button " class="btn btn-outline-light" data-toggle="modal" data-target="#addModal">
                                编辑
                            </button>
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">11</th>
                        <td>HERMÈS</td>
                        <td>美容彩妆</td>
                        <td>热销爆款</td>
                        <td>大地</td>
                        <td>615</td>
                        <td>538</td>
                        <td>
                            <button type="button" class="btn btn-outline-light button1 " data-toggle="modal" data-target="#delModal">
                                删除
                            </button>
                            <button type=" button " class="btn btn-outline-light ">
                                上移
                            </button>
                            <button type="button " class="btn btn-outline-light ">
                                下移
                            </button>
                            <button type="button " class="btn btn-outline-light" data-toggle="modal" data-target="#addModal">
                                编辑
                            </button>
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">12</th>
                        <td>HERMÈS</td>
                        <td>美容彩妆</td>
                        <td>热销爆款</td>
                        <td>大地</td>
                        <td>615</td>
                        <td>538</td>
                        <td>
                            <button type="button" class="btn btn-outline-light button1 " data-toggle="modal" data-target="#delModal">
                                删除
                            </button>
                            <button type=" button " class="btn btn-outline-light ">
                                上移
                            </button>
                            <button type="button " class="btn btn-outline-light ">
                                下移
                            </button>
                            <button type="button " class="btn btn-outline-light" data-toggle="modal" data-target="#addModal">
                                编辑
                            </button>
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">13</th>
                        <td>HERMÈS</td>
                        <td>美容彩妆</td>
                        <td>热销爆款</td>
                        <td>大地</td>
                        <td>615</td>
                        <td>538</td>
                        <td>
                            <button type="button" class="btn btn-outline-light button1 " data-toggle="modal" data-target="#delModal">
                                删除
                            </button>
                            <button type=" button " class="btn btn-outline-light ">
                                上移
                            </button>
                            <button type="button " class="btn btn-outline-light ">
                                下移
                            </button>
                            <button type="button " class="btn btn-outline-light" data-toggle="modal" data-target="#addModal">
                                编辑
                            </button>
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">14</th>
                        <td>HERMÈS</td>
                        <td>美容彩妆</td>
                        <td>热销爆款</td>
                        <td>大地</td>
                        <td>615</td>
                        <td>538</td>
                        <td>
                            <button type="button" class="btn btn-outline-light button1 " data-toggle="modal" data-target="#delModal">
                                删除
                            </button>
                            <button type=" button " class="btn btn-outline-light ">
                                上移
                            </button>
                            <button type="button " class="btn btn-outline-light ">
                                下移
                            </button>
                            <button type="button " class="btn btn-outline-light" data-toggle="modal" data-target="#addModal">
                                编辑
                            </button>
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">15</th>
                        <td>HERMÈS</td>
                        <td>美容彩妆</td>
                        <td>热销爆款</td>
                        <td>大地</td>
                        <td>615</td>
                        <td>538</td>
                        <td>
                            <button type="button" class="btn btn-outline-light button1 " data-toggle="modal" data-target="#delModal">
                                删除
                            </button>
                            <button type=" button " class="btn btn-outline-light ">
                                上移
                            </button>
                            <button type="button " class="btn btn-outline-light ">
                                下移
                            </button>
                            <button type="button " class="btn btn-outline-light" data-toggle="modal" data-target="#addModal">
                                编辑
                            </button>
                        </td>
                    </tr>
                </tbody>
            </table>

            <!-- 分页 -->
            <nav aria-label="Page navigation example" class="page">
                <ul class="pagination">
                    <li class="page-item"><a class="page-link" href="#">上一页</a></li>
                    <li class="page-item"><a class="page-link" href="#">1</a></li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item"><a class="page-link" href="#">下一页</a></li>
                </ul>
            </nav>
        </div>


        <!-- 模态框 -->

        <!-- Modal  删除的提示框-->
        <div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="delModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="delModalLabel">
                            删除提示框
                        </h4>
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
                        </button>

                    </div>
                    <div class="modal-body">
                        你确定要删除这项数据吗？
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">点错了
                        </button>
                        <button type="button" class="btn btn-primary" data-dismiss="modal">
                            确定删除
                        </button>
                    </div>
                </div>

            </div>

        </div>

        <!-- Modal 添加/编辑的模态框 -->
        <div class="modal fade" id="addModal" tabindex="-1" aria-labelledby="addModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="addModalLabel">添加/编辑商品</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    </div>
                    <div class="modal-body">
                        <!-- 添加框中的表单 -->
                        <form>
                            <div class="form-group">
                                <label for="formGroupExampleInput">商品名称</label>
                                <input type="text" class="form-control" id="formGroupExampleInput" placeholder="请输入商品名称">
                            </div>
                            <!-- 下拉菜单 -->
                            <div class="dropdown-add">
                                <div class="dropdown">
                                    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-expanded="true">
                        所属类别
                        </button>
                                    <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
                                        <button class="dropdown-item" type="button">美容彩妆</button>
                                        <button class="dropdown-item" type="button">母婴儿童</button>
                                        <button class="dropdown-item" type="button">营养保健</button>
                                        <button class="dropdown-item" type="button">数码家电</button>
                                        <button class="dropdown-item" type="button">个护家清</button>
                                        <button class="dropdown-item" type="button">服饰鞋靴</button>
                                        <button class="dropdown-item" type="button">运动户外</button>
                                        <button class="dropdown-item" type="button">手表配饰</button>
                                        <button class="dropdown-item" type="button">轻奢</button>
                                        <button class="dropdown-item" type="button">家居生活</button>
                                        <button class="dropdown-item" type="button">环球美食</button>
                                        <button class="dropdown-item" type="button">宠物生活</button>
                                    </div>
                                </div>
                                <br>
                                <div class="dropdown">
                                    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-expanded="false">
                        陈列类别
                        </button>
                                    <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
                                        <button class="dropdown-item" type="button">热销爆款</button>
                                        <button class="dropdown-item" type="button">美容彩妆</button>
                                        <button class="dropdown-item" type="button">个人洗护</button>
                                        <button class="dropdown-item" type="button">服饰鞋靴</button>
                                        <button class="dropdown-item" type="button">轻奢腕表</button>
                                    </div>
                                </div>
                                <div>

                                    <div class="form-group">
                                        <label for="formGroupExampleInput2">商品描述</label>
                                        <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="商品描述">
                                    </div>
                                    <div class="form-group">
                                        <label for="formGroupExampleInput2">现价</label>
                                        <input type="number" class="form-control" id="formGroupExampleInput2">
                                    </div>
                        </form>

                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-primary" data-dismiss="modal">保存</button>
                        </div>
                        </div>
                    </div>
                </div>


</body>

</html>